<template>
  <div class="home">
       <div>
          <h3>state</h3>
          <p>a:{{ a }}---{{ A }}</p>
          <p>b:{{ b }}---{{ B }}</p>
      </div>
    <div>
          <h3>getters</h3>
          <p>doubleA:{{ doubleA }}</p>
          <p>doubleA:{{ doubleB }}</p>
          <p>doubleBoth:{{ doubleBoth }}</p>
      </div>
       <div>
          <h3>mutations</h3>
          <p>
              <button @click="addA">a++</button>
              <button @click="addAN(10)">a+10</button>
          </p>
          <p>
              <button @click="addB">b++</button>
          </p>
      </div>
      <div>
          <h3>actions</h3>
          <p>
              <button @click="addA_Async">a++</button>
              <button @click="addAN_Async(10)">a+10</button>
          </p>
          <p>
              <button @click="addB_Async()">b++</button>
          </p>
          <p>
            <button @click="addBoth_Async()">a++,b++</button>
          </p>
      </div> 
  </div>
</template>

<script>
// @ is an alias to /src


// Vue组件中如果使用store实例

// 1. 直接通过$store获取数据和方法  => 手搓版  => 麻烦
// state => this.$store.state
// getters => this.$store.getters
// mutations  => 同步方法 this.$store.commit("addAN",10)
// actions  => 异步方法    this.$store.dispatch("addA_Async",10)

// 2. 直接通过Vue实例对应属性名/方法名获取  -> Vue实例上没有相关属性和方法 -> 自己配置一份 
//    优点: 通过实例访问数据和方法  缺点:自己写的感觉更麻烦了

// 3.官方提供了辅助函数  可以将响应的数据和方法映射到对象上返回, 我们只需要将其挂载到实例上即可 (state,getters -> computed,  mutations,actions -> methods)

import { mapState,mapGetters,mapMutations,mapActions} from 'vuex';


var mapStateObj = mapState(["a","b"]); 
console.log("mapStateObj",mapStateObj);

/*  
    返回值:
    {
        a(){
            return this.$store.state.a;
        },
        b(){
            return this.$store.state.b;
        },
    }
*/

// var obj1 = {a:1,b:2}
// var obj2 = {c:1,d:2}
// var obj = {...obj1,...obj2}



export default {
  name: 'HomeView',
  data(){
    return {
        // a:10,
        // b:20.
    }
  },
  computed:{
    // 将state中的数据挂载到当前Vue实例  (this.a 依赖于this.$store.state.a)
    // a(){
    //     return this.$store.state.a;
    // },
    // b(){
    //     return this.$store.state.b;
    // },
    // A(){   // 可以随意改名
    //     return this.$store.state.a;
    // },

    // 此写法中字符串既作为实例的属性名,也是store实例中state的属性名
    ...mapState(["a","b","zhang"]), // this["a"] => this.$store.state["a"]

    // 此写法可以自定义属性名
    ...mapState({
        A:"a",   //  this["A"] => this.$store.state["a"]
        B:"b",   //  this["B"] => this.$store.state["a"]

        // A:(state)=> state.a,  // 健值也可以是一个函数,函数中有一个参数表示state对象, 可以直接通过state取值
        name:(state)=> state.info.zhang,  // 
    }), 

    // 将getters中的数据挂载到当前Vue实例  (this.doubleA 依赖于this.$store.getters.doubleA)
    // doubleA(){
    //     return this.$store.getters.doubleA;
    // },
    // doubleB(){
    //     return this.$store.getters.doubleB;
    // },
    // doubleBoth(){
    //     return this.$store.getters.doubleBoth;
    // },
    // dbA(){  // 可以随意改名
    //     return this.$store.getters.doubleA;
    // },

    ...mapGetters(["doubleA","doubleB","doubleBoth"]),
    ...mapGetters({
        dbA:"doubleA"
    }),

  },
  methods:{
    // 将mutations中的数据挂载到当前Vue实例  (同步)
    // addA(arg){
    //     return this.$store.commit("addA",arg);
    // },
    // addAN(arg){
    //     return this.$store.commit("addAN",arg);
    // },
    // addB(arg){
    //     return this.$store.commit("addB",arg);
    // },

    ...mapMutations(["addA","addAN","addB"]),


     // 将actions中的数据挂载到当前Vue实例  (异步)
    // addA_Async(arg){
    //     return this.$store.dispatch("addA_Async",arg);
    // },
    // addAN_Async(arg){
    //     return this.$store.dispatch("addAN_Async",arg);
    // },
    // addB_Async(arg){
    //     return this.$store.dispatch("addB_Async",arg);
    // },
    // addBoth_Async(arg){
    //     return this.$store.dispatch("addBoth_Async",arg);
    // },

    
    ...mapActions(["addA_Async","addAN_Async","addB_Async","addBoth_Async"]),
  },
  mounted(){
    console.log("better",this);
    console.log("store实例",this.$store);
  }
}
</script>
